<!--
 * @Author: jiutian
 * @Date: 2023-02-03 17:09:52
 * @LastEditTime: 2023-03-10 19:33:10
 * @LastEditors:  
-->
<script setup lang="ts">
import defaultPic from "@imgs/user_default.webp";
import request from "@api";
import { useRoute } from "vue-router";
import { useStore } from "@/store";
import { reactive, shallowRef } from "@vue/reactivity";
import { onBeforeMount, onMounted } from "@vue/runtime-core";
import BlogList from "./component/blogList.vue";
import likeList from "./component/likeList.vue";
import collectList from "./component/collectList.vue";
import focusList from "./component/focusList.vue";
import commitList from "./component/commitList.vue";
import { ElMessage, ElMessageBox } from "element-plus";
const $route = useRoute();
const store = useStore();

let personDetail = shallowRef({});
let infoObj = shallowRef({});
let activeIndex = shallowRef(0);
let rightRef = shallowRef();
let currentCom = shallowRef(BlogList);
let dialogVisible = shallowRef(false);

function getPersonInfo() {
  request["check/getPersonInfo"]({
    params: {
      id: $route.params.id || store.currentUser.id,
    },
  }).then((res: any) => {
    if (res.code == 200) {
      personDetail.value = res.data;
      infoObj.value = res.data.countObj;
    }
  });
}

function closeAd() {
  rightRef.value.style.width = "0px";
  rightRef.value.style.marginLeft = "0px";
}

function clickTabItem(e: any, key: string, index: number) {
  activeIndex.value = index;
  switch (key) {
    case "帖子":
      currentCom.value = BlogList;
      break;
    case "点赞":
      currentCom.value = likeList;
      break;
    case "收藏":
      currentCom.value = collectList;
      break;
    case "关注":
      currentCom.value = focusList;
      break;
    case "评论":
      currentCom.value = commitList;
      break;
  }
}

function handleClose(done: () => void) {
  done();
}

function editPerson() {
  // dialogVisible.value = true;
  ElMessage("暂无开发");
}

onMounted(() => {
  getPersonInfo();
});
</script>

<template>
  <div class="person">
    <div class="top_bg">
      <div class="info_box">
        <div class="left">
          <img :src="personDetail.userPic || defaultPic" alt="" />
          <div class="username">
            <div>{{ personDetail.username || personDetail.phoneNumber }}</div>
            <div
              class="editBtn"
              v-if="$route.params.id == store.currentUser.id"
            >
              <el-button type="primary" size="small" @click="editPerson"
                >修改信息</el-button
              >
            </div>
          </div>
        </div>
        <div class="right" v-if="$route.params.id != store.currentUser.id">
          <el-button type="primary">关注</el-button>
          <el-button>发信息</el-button>
        </div>
      </div>
    </div>
    <div class="main_tool">
      <span
        @click="clickTabItem($event, key, index)"
        v-for="(item, key, index) in infoObj"
        :key="key"
        >{{ key }}({{ Number(item) > 99 ? "99+" : item }})</span
      >
      <div
        class="active_box"
        :style="{ '--acLeft': Number(activeIndex) * 100 + 'px' }"
      >
        <div class="line"></div>
      </div>
    </div>

    <div class="content_box">
      <div class="left">
        <component
          :is="currentCom"
          :id="$route.params.id || store.currentUser.id"
          @initData="getPersonInfo"
        ></component>
      </div>
      <div class="right" shallowRef="rightRef">
        <div class="first_AD">
          <div class="img">
            <span @click="closeAd">关闭</span>
            <img
              src="https://t14.baidu.com/it/u=2841521351,2808396395&fm=224&app=112&size=h200&n=0&f=JPEG&fmt=auto?sec=1676221200&t=27285ff12f598d8ff9fefe3807769a68"
              alt=""
              srcset=""
            />
          </div>
          <div class="desc">
            键盘广告键盘广告键盘广告键盘广告键盘广告键盘广告键盘广告键盘广告键盘广告键盘广告键盘广告键盘广告键盘广告键盘广告键盘广告键盘广告键盘广告键盘广告键盘广告键盘广告
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      v-model="dialogVisible"
      title="修改信息"
      width="30%"
      :before-close="handleClose"
    >
      <div class="edit-content"></div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.person {
  .top_bg {
    width: 100%;
    height: 200px;
    // background-image: url("@imgs/xyj_b1.webp");
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: linear-gradient(
      to right,
      rgba(5, 5, 55, 0.3) 0%,
      rgba(5, 5, 55, 1) 50%,
      rgba(5, 5, 55, 0.3) 100%
    );
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    .info_box {
      display: flex;
      justify-content: space-between;
      padding: 15px;
      align-items: center;
      .left {
        display: flex;
        img {
          width: 64px;
          height: 64px;
          border-radius: 50px;
        }
        .username {
          font-weight: 700;
          padding: 10px;
          .editBtn {
            margin-top: 5px;
          }
        }
      }
      .right {
        .el-button {
          padding: 0;
          width: 76px;
          height: 30px;
          color: #fff;
          &:not(.el-button--primary) {
            background-color: transparent;
          }
        }
      }
    }
  }

  .main_tool {
    display: flex;
    border-bottom: 1px solid #ededed;
    position: relative;
    margin-bottom: 2px;
    span {
      font-size: 14px;
      width: 100px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      cursor: pointer;
      user-select: none;
      transition: all 0.3s;
    }

    .line {
      width: 100px;
      height: 3px;
      position: absolute;
      bottom: -3px;
      left: var(--acLeft);
      background-color: #7d84fe;
      border-radius: 5px;
      transition: all 0.3s;
    }
    .active_box {
      background-color: rgba(224, 224, 238, 0.5);
      width: 100px;
      height: 40px;
      position: absolute;
      bottom: 0px;
      left: var(--acLeft);
      transition: all 0.3s;
      .line {
        width: 100px;
        height: 3px;
        position: absolute;
        bottom: -3px;
        left: 0px;
        background-color: #7d84fe;
        border-radius: 5px;
      }
    }
  }

  .content_box {
    height: calc(100vh - 70px - 243px);
    display: flex;
    padding: 10px;
    .left {
      flex: 1;
    }
    .right {
      margin-left: 10px;
      overflow: hidden;
      width: 300px;
      transition: all 0.3s;
      .first_AD {
        width: 300px;
        .img {
          position: relative;
          img {
            width: 100%;
          }
          span {
            position: absolute;
            right: 5px;
            top: 5px;
            font-size: 14px;
            color: #fff;
            cursor: pointer;
            user-select: none;
          }
        }

        .desc {
          font-size: 14px;
          color: #999;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden; //溢出内容隐藏
          text-overflow: ellipsis; //文本溢出部分用省略号表示
          display: -webkit-box; //特别显示模式
          -webkit-line-clamp: 2; //行数
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
    }
  }
}
</style>